<template>
  <div class="home">
    <!-- 嵌套路由基本使用
    1:在需要使用嵌套路由的地方加一个  router-view
    2:配制该路由的子路由
         children:[
         {
             path
             component
         }
         ]



    
     -->
    <router-view></router-view>
    <!-- 标签栏 
    van-tabbar  
      placeholder 固定在底部时，是否在标签位置生成一个等高的占位元素
       v-model:子项的索引值(用于控制选中下面哪一个子项)
       route:true:使用路由模式(v-model没用了),false不使用路由模式
        van-tabbar-item  
            icon="vant自带图标"
            to="跳转的路由path"
           slot="icon" 
     el-menu  router:使用路由模式
         em-menu-item  index:跳转的路由path    
    -->

    <!-- v-model="active" -->
    <van-tabbar
      inactive-color="#b4b4bd"
      active-color="#e40137"
      route
      placeholder
      class="tabbar"
    >
      <van-tabbar-item to="/home/company">
        <span class="title">公司</span>
        <template #icon>
          <i class="iconfont f28">&#xe63d;</i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/home/question">
        <span class="title">刷题</span>
        <template #icon>
          <i class="iconfont f28">&#xe63f;</i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/home/find">
        <span class="title">发现</span>
        <template #icon>
          <i class="iconfont f28">&#xe646;</i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/home/my">
        <span class="title">我的</span>
        <template #icon>
          <i class="iconfont f28">&#xe645;</i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data () {
    return {
      //   active: 3
    }
  }
}
</script>
<style lang="less" scoped>
.home {
  .f28 {
    font-size: 28px;
  }
  .tabbar {
    height: 60px;
  }
  .title {
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0px;
  }
}
</style>
